<template>
	<div>
		<div v-for="down in layerChildren" :key="down.id">
			<div
				class="menu-item"
				:style="{ paddingLeft: (props.level - 1) * 14 + 12 + 'px' }"
				@click="setCollapsed(down)"
			>
				<img :src="down?.isCollapsed ? fileIMG : fileIMG_ACTIVE" alt="" class="h-4 w-4" />
				<div class="font">{{ down.name }}</div>
			</div>
			<Transition>
				<div v-show="!down.isCollapsed">
					<div
						v-for="files in down.files"
						:key="files.id"
						class="menu-item"
						:style="{ paddingLeft: props.level * 14 + 12 + 'px' }"
					>
						<el-checkbox v-model="files.checked" @change="checkChange(files)" />
						<img :src="dataIMG" class="w-4" />
						<div class="font" :title="files.fileName">{{ files.fileName }}</div>
						<div class="has-choice">
							<img
								src="@img/main/action-1@2x.png"
								alt=""
								title="加载数据"
								@click="showTiff(files)"
							/>
							<img src="@img/main/action-7@2x.png" alt="" title="下载" @click="download(files)" />
							<img
								src="@img/main/action-6@2x.png"
								alt=""
								:title="files.type == '1' ? '创建解译任务' : '矢量数据分析'"
								@click="openAipopup(files)"
							/>
							<img src="@img/main/action-4.png" alt="" title="出图" @click="outpic(files)" />
						</div>
					</div>
				</div>
			</Transition>
			<Transition>
				<ul v-show="down.children && !down.isCollapsed">
					<tree-items
						:layer-children="down.children"
						:level="level + 1"
						@view="showTiff"
						@process="openAipopup"
						@download="download"
						@outpicture="outpic"
						@clickItem="clickItem"
						@checkChange="checkChange"
					></tree-items>
				</ul>
			</Transition>
		</div>
	</div>
</template>
<script setup lang="ts">
import fileIMG from "@img/main/file@2x.png";
import fileIMG_ACTIVE from "@img/main/file-on@2x.png";
import dataIMG from "@img/main/data@2x.png";
import type { Tree, dataListItem } from "@/api/ai-processing/types";
const props = defineProps<{
	layerChildren: Tree[];
	level: number;
}>();
const checkeditem = ref(false);
const hasChildren = (item: Tree) => {
	return item.children && item.children.length > 0;
};
const emit = defineEmits(["view", "process", "download", "outpicture", "checkChange", "clickItem"]);
const setCollapsed = (item: Tree) => {
	// 如果有isCollapsed属性，就取反，如果没有就添加isCollapsed属性
	if ("isCollapsed" in item) {
		console.log(item, "折叠");
		item.isCollapsed = !item.isCollapsed;
	} else {
		console.log(item, "展开");

		item.isCollapsed = false;
	}
	emit("clickItem", item);
};

const clickItem = (item: dataListItem) => {
	emit("clickItem", item);
};
const checkChange = (item: dataListItem) => {
	emit("checkChange", item);
};
const showTiff = (item: dataListItem) => {
	item.checked = true;
	emit("view", item);
};
const openAipopup = (item: dataListItem) => {
	emit("process", item);
};
const download = (item: dataListItem) => {
	emit("download", item);
};
const outpic = (item: dataListItem) => {
	emit("outpicture", item);
	// console.log("出图", item);
};
onMounted(() => {
	// console.log("子组件获取到的数据", props);
});
</script>
<style lang="scss" scoped>
// 过渡动画
.v-enter-active,
.v-leave-active {
	transition: all 0.5s ease;
}

.v-enter-from,
.v-leave-to {
	transform: translateX(30px);
	opacity: 0;
}
.menu-item {
	@apply flex items-center;
	height: 32px;

	> .font {
		font-size: 14px;
		margin-left: 4px;
	}

	.font {
		@apply cursor-pointer truncate;
	}

	> *:first-child {
		@apply mx-2;
	}

	> *:nth-child(3) {
		width: 100%;
		text-align: left;
		flex-shrink: 1;
	}

	> *:nth-child(4) {
		flex-shrink: 0;
	}

	.has-choice {
		img {
			@apply mr-2 w-4;
		}
		display: none;
	}

	&:hover {
		.has-choice {
			@apply flex  justify-between;

			> img {
				@apply cursor-pointer;
			}
			> img:first-child:hover {
				content: url("@img/main/action-1-on@2x.png");
			}
			> img:nth-child(2):hover {
				content: url("@img/main/action-7-on@2x.png");
			}
			> img:nth-child(3):hover {
				content: url("@img/main/action-6-on@2x.png");
			}
			> img:last-child:hover {
				content: url("@img/main/action-4.png");
			}
		}

		background: rgba(7, 151, 255, 0.2);
	}
}
</style>
